<template>
	<fx-list-filter @on-enter="onSearchClick">
		<template slot="row-1">
			<el-form-item label="产成品：" label-width="110px">
				<!-- <w-select ref='materialProSelect' v-model="materialProIds" multiple clearable collapseTags :optionlist='materialProlList' class="form-input">
				</w-select> -->
				<w-select-mulity
					ref='materialProSelect'
					v-model="materialProIds"
					:optionlist="materialProlList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="原料：">
				<!-- <w-select ref='materialUseSelect' v-model="materialUseIds" multiple clearable collapseTags :optionlist='materialUseList' class="form-input">
				</w-select> -->
				<w-select-mulity
					ref='materialUseSelect'
					v-model="materialUseIds"
					:optionlist="materialUseList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="工序：">
				<!-- <w-select ref='procedureSelect' v-model="producedureIds" multiple clearable collapseTags :optionlist='producedureList' class="form-input">
				</w-select> -->
				<w-select-mulity
					ref='procedureSelect'
					v-model="producedureIds"
					:optionlist="producedureList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="启停状态：" label-width="110px">
				<el-select v-model="enable" prop="enable" placeholder="请选择" clearable size='mini' class="form-input">
					<el-option
						v-for="item in enableStateList"
						:key="item.id"
						:label="item.label"
						:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</template>
		<template slot="tools">
			<el-button class="order-btn" type="primary" @click="onSearchClick">查询</el-button>
			<el-button class="order-btn" type="text"  @click="onResetClick">重置</el-button>
		</template>
	</fx-list-filter>
</template>
<script>
export default {
	name: 'filterBar',
	props: {
		materialProlList: {
			type: Array,
			default: () => {
				return []
			}
		},
		materialUseList: {
			type: Array,
			default: () => {
				return []
			}
		},
		producedureList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data () {
		return {
			materialProIds: [],
			materialUseIds: [],
			producedureIds: [],
			enable: '',
			enableStateList: this.$fxStateMiddleware.getStateConfig('enableState')
		}
	},
	methods: {
		onSearchClick () {
			this.$emit('on-search', this.getFilterParams())
		},
		onResetClick () {
			this.materialProIds = []
			this.materialUseIds = []
			this.producedureIds = []
			this.enable = ''
		},
		getFilterParams () {
			const filterSearch = {
				materialProIds: this.materialProIds,
				materialUseIds: this.materialUseIds,
				producedureIds: this.producedureIds,
				enable: this.enable
			}
			const params = {}
			Object.keys(filterSearch).forEach(key => {
				if (filterSearch[key] !== '') {
					params[key] = filterSearch[key]
				}
			})
			return {
				...params
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-input {
	width: 170px
}
</style>
